<script setup>
import { reactive, ref } from 'vue';
let list = reactive([
  new URL('@/assets/carousel/生成宠物商品轮播图.png', import.meta.url).href,
  new URL('@/assets/carousel/生成宠物商品轮播图1.png', import.meta.url).href,
  new URL('@/assets/carousel/生成宠物商品轮播图2.png', import.meta.url).href,
  new URL('@/assets/carousel/生成宠物商品轮播图3.png', import.meta.url).href,
]);
</script>

<template>
<el-carousel :interval="4000" type="card" height="200px">
  <el-carousel-item v-for="(item, index) in list" :key="index">
    <img style="width: 600px;object-fit: contain" :src='item'></img>
  </el-carousel-item>
</el-carousel>
</template>

<style scoped>
.el-carousel{
  width: 1200px;
  margin: 60px auto 0;
}
.el-carousel__item div {
  background-position: center;
}
</style>
